﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MapOld.aspx.cs" Inherits="ZHDJ.Web.MapOld" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="keywords" content="science,education,culture,politics,ecnomics,relationships,entertaiment,human" />
    <meta name="description" content="This page is about the meaning of science,education,culture,politics,ecnomics,relationships,entertaiment,human." />
    <meta name="author" content="Mr Shen,sgq625@126.com" />
    <meta name="revised" content="Mr Shen,2017-08-08 00:00:00" />
    <meta name="generator" content="HBuilder 8.8.0" />
    <title>党建地图</title>
    <link href="Resource/themes/default/css/bootstrap.min.css" rel="stylesheet" />
    <link href="Resource/themes/default/css/jquery.treeview.css" rel="stylesheet" />
    <script type="text/javascript" src="http://api.tianditu.com/api?v=4.0"></script>
    <style type="text/css">
        .navbar {
            margin: 0;
            min-height: 100px;
            background: url(Resource/themes/default/images/Map/bg.jpg) no-repeat center;
            background-size: cover;
        }

        .navbar-default .navbar-nav > li > a {
            color: #fff;
        }

        .col-sm-12 {
            width: 100%;
        }

        .filetree span.file {
            cursor: pointer;
        }

            .filetree span.file:hover {
                color: red;
            }



        /*tab页实现样式开始*/
        ul, li {
            margin: 0 auto;
            padding: 0;
        }

        a:link {
            color: #00F;
            text-decoration: none;
        }

        a:visited {
            color: #00F;
            text-decoration: none;
        }

        a:hover {
            color: #c00;
            text-decoration: underline;
        }

        ul {
            list-style: none;
        }

        .main {
            clear: both;
            padding: 8px;
        }
        /*第一种形式*/
        #tabs0 {
            height: 200px;
            width: 452px;
            border: 1px solid #cbcbcb;
            background-color: #f2f6fb;
        }

        .menu0 {
            width: 450px;
        }

            .menu0 li {
                display: block;
                float: left;
                padding: 4px 0;
                width: 150px;
                text-align: center;
                cursor: pointer;
                background: #FFFFff;
            }

                .menu0 li.hover {
                    background: #f2f6fb;
                }

        #main0 ul {
            display: none;
        }

            #main0 ul.block {
                display: block;
            }
        /*tab页实现样式结束*/

        .tdt-infowindow-content {
            width: 452px !important;
        }

        .tabcontroller {
			width: 100%;
		}
			
		.tabcontroller ul {
			list-style: none;
			width: 100%;
			overflow: hidden;
		}
			
		.tabcontroller ul li {
			width: 50%;
			float: left;
			text-align: center;
			cursor: pointer;
			height: 40px;
			line-height: 40px;
			font-size: 14px;
			font-weight: 700;
			color: #fff;
			background: red;
		}
			
		.tabcontroller .active {
			background: white;
			color: red;
		}		
			
		.tabpanel {
			width: 100%;
		}
			
		.tabpanel .tab {
			display: none;
			min-height: 500px;
			padding: 20px;
		}
			
		.tabpanel .on {
			display: block;
		}
    </style>
    <script type="text/javascript">
        var map;
        var zoom = 8;
        var center = "";
        var localsearch;
        var radius = 5000;
        var infoWin;
        var polygons = [];
        var parentPolygon;

        function onLoad(xPoint, yPoint) {
            //初始化地图对象
            map = new T.Map("mapDiv");

            //设置显示地图的中心点和级别
            if (xPoint != null && yPoint != null) {
                center = new T.LngLat(xPoint, yPoint);
                map.centerAndZoom(center, zoom);
            }
            else {
                center = new T.LngLat(116.97706, 36.66227);
                map.centerAndZoom(center, zoom);
            }

            //创建缩放平移控件对象
            control = new T.Control.Zoom();
            //添加缩放平移控件
            map.addControl(control);

            //允许鼠标滚轮缩放地图
            map.enableScrollWheelZoom();
            //创建比例尺控件对象
            var scale = new T.Control.Scale();
            //添加比例尺控件
            map.addControl(scale);

            //创建地图类型对象
            var mapType = new T.Control.MapType();
            //添加控件
            map.addControl(mapType);

            //获取行政区划对象
            administrative = new T.AdministrativeDivision();
            var config = {
                needSubInfo: true,
                needAll: false,
                needPolygon: true,
                needPre: true,
                searchType: 1,
                searchWord: "山东省"
            };
            administrative.search(config, searchResult);

            //鹰眼
            var miniMap = new T.Control.OverviewMap({
                isOpen: true,
                size: new T.Point(150, 150)
            });
            map.addControl(miniMap);

            //允许惯性拖拽
            map.enableInertia();

            //创建右键菜单对象 
            var menu = new T.ContextMenu({ width: 140 });
            var txtMenuItem = [
                {
                    text: '放大',
                    callback: function () {
                        map.zoomIn()
                    }
                },
                {
                    text: '缩小',
                    callback: function () {
                        map.zoomOut()
                    }
                },
                {
                    text: '放置到最大级',
                    callback: function () {
                        map.setZoom(18)
                    }
                },
                {
                    text: '查看全国',
                    callback: function () {
                        map.setZoom(4)
                    }
                },
                {
                    text: '获得右键点击处坐标',
                    isDisable: false,
                    callback: function (lnglat) {
                        alert(lnglat.getLng() + "," + lnglat.getLat());
                    }
                }
            ];
            for (var i = 0; i < txtMenuItem.length; i++) {

                //添加菜单项 
                var item = new T.MenuItem(txtMenuItem[i].text, txtMenuItem[i].callback);
                //item.disable(); 
                menu.addItem(item);
                if (i == 1 || i == 3) {
                    //添加分割线 
                    menu.addSeparator();
                }
            }
            map.addContextMenu(menu);

            var config = {
                pageCapacity: 10,    //每页显示的数量
                onSearchComplete: localSearchResult  //接收数据的回调函数
            };
            //创建搜索对象
            localsearch = new T.LocalSearch(map, config);

            var data = <%=json%>;
            //解析数据结果
            poisData(data, xPoint, yPoint);
        }

        //解析点数据结果
        function poisData(obj, xPoint, yPoint) {
            if (obj) {
                //坐标数组，设置最佳比例尺时会用到
                var zoomArr = [];
                for (var i = 0; i < obj.length; i++) {
                    //闭包
                    (function (i) {
                        if (obj[i].XPoint != null && obj[i].YPoint != null) {
                            //名称
                            var name = obj[i].BranchName;
                            //联系人
                            var linkMan = obj[i].LinkMan;
                            //联系电话
                            var linkPhone = obj[i].LinkPhone;
                            //地址
                            var address = obj[i].Address;
                            //坐标
                            var lnglat = new T.LngLat(obj[i].XPoint, obj[i].YPoint);
                            //var winHtml = "地址:" + address;

                            //创建图片对象 
                            var icon = new T.Icon({
                                iconUrl: "/Resource/themes/default/images/Map/markerA.png",
                                iconSize: new T.Point(19, 27),
                                iconAnchor: new T.Point(10, 25)
                            });

                            //向地图上添加自定义标注 
                            var marker = new T.Marker(lnglat, { icon: icon });

                            //创建标注对象
                            //var marker = new T.Marker(lnglat);

                            //地图上添加标注点
                            map.addOverLay(marker);

                            //如果是当前坐标，直接显示详细信息
                            if (obj[i].XPoint == xPoint && obj[i].YPoint == yPoint) {
                                this.showPositionData(marker, name, linkMan, linkPhone, address);
                            }

                            //注册标注点的点击事件
                            marker.addEventListener("click", function () {
                                this.showPositionData(marker, name, linkMan, linkPhone, address);
                            }, this)
                            zoomArr.push(lnglat);
                        }
                    })(i);
                }
            }
        }

        //显示信息框
        function showPositionData(marker, name, linkMan, linkPhone, address) {
            if (infoWin) {
                map.removeOverLay(infoWin);
                infoWin = null;
            }

            //var html =
            //    "<div style='margin:0px;'>" +
            //    "<div style='margin:10px 10px; '>" +
            //    "<div style='margin: 0px 0px 10px 0px;'>组织名称: " + name + "<br> 姓名: " + linkMan + "  <br> 联系电话 : " + linkPhone + " <br>地址：" + address + "" +
            //    "</div>" +
            //    "</div>" +
            //    "</div>";

            var html =
                '<div id="tabs0">' +
                '<ul class="menu0" id="menu0">' +
                '<li onclick="setTab(0,0)" class="hover">支部简介</li>' +
                '<li onclick="setTab(0,1)">活动情况</li>' +
                '<li onclick="setTab(0,2)">党群活动中心</li>' +
                '</ul>' +
                '<div class="main" id="main0">' +
                '<ul class="block">' +
                
                '<div style="float:left;width:30%;"><img style="width:100%;" src="Resource/themes/default/images/PartyEx/party-flag-icon.jpg" /></div>' +
                "<div style='padding: 0px 0px 0px 10px;float:left;width:70%;'>组织名称: " + name + "<br> 姓名: " + linkMan + "  <br> 联系电话 : " + linkPhone + " <br>地址：" + address + "" +
                '<div style="clear:both;"></div>' +

                '</ul>' +
                '<ul><li>活动情况</li></ul>' +
                '<ul><li>党群活动中心</li></ul>' +
                '</div>' +
                '</div>' +
                '';

            infoWin = new T.InfoWindow(html);
            marker.openInfoWindow(infoWin);
        }

        function localSearchResult(result) {
            //清空地图及搜索列表
            clearAll();
            //创建圆
            createCircle();
            //解析点数据结果
            pois(result.getPois());
        }

        //解析点数据结果
        function pois(obj) {
            if (obj) {
                //坐标数组，设置最佳比例尺时会用到
                var zoomArr = [];
                for (var i = 0; i < obj.length; i++) {
                    //闭包
                    (function (i) {
                        //名称
                        var name = obj[i].name;

                        //地址
                        var address = obj[i].address;

                        //坐标
                        var lnglatArr = obj[i].lonlat.split(" ");
                        var lnglat = new T.LngLat(lnglatArr[0], lnglatArr[1]);
                        var winHtml = "地址:" + address;

                        //创建标注对象
                        var marker = new T.Marker(lnglat);

                        //地图上添加标注点
                        map.addOverLay(marker);

                        //注册标注点的点击事件
                        marker.addEventListener("click", function () {
                            this.showPosition(marker, name, winHtml);
                        }, this)
                        zoomArr.push(lnglat);

                        //在页面上显示搜索的列表
                        var a = document.createElement("a");
                        a.href = "javascript://";
                        a.innerHTML = name;
                        a.onclick = function () {
                            showPosition(marker, name, winHtml);
                        }
                    })(i);
                }
            }
        }

        //圆形
        function createCircle() {
            var config = {
                color: "blue", //折线颜色
                fillColor: "#fff",    //填充颜色。当参数为空时，折线覆盖物将没有填充效果
                weight: "3", //折线的宽度，以像素为单位
                opacity: 0.5,    //折线的透明度，取值范围0 - 1
                fillOpacity: 0.4,
                lineStyle: "solid" //折线的样式，solid或dashed
            };

            //定义该矩形的显示区域
            var circle = new T.Circle(center, radius, config);
            map.addOverLay(circle);
        }

        //显示信息框
        function showPosition(marker, name, winHtml) {
            if (infoWin) {
                map.removeOverLay(infoWin);
                infoWin = null;
            }

            var html = "<h5>" + name + "</h5>";
            html += "<br>";
            html += winHtml;
            infoWin = new T.InfoWindow(html);
            marker.openInfoWindow(infoWin);
        }

        //清空地图及搜索列表
        function clearAll() {
            map.clearOverLays();
        }

        //对搜索到的行政区划解析
        function searchResult(result) {
            var parentPolygon = { color: "blue", weight: 3, opacity: 1, fillColor: "#FFFFFF", fillOpacity: 0 };
            var childPolygon = { color: "blue", weight: 1.5, opacity: 1, fillColor: "#FFFFFF", fillOpacity: 0 };
            if (result.getStatus() == 100) {
                var data = result.getData();
                for (var i = 0; i < data.length; i++) {
                    if (data[i].points) {
                        //绘制行政区划
                        polygon(data[i].points, true, parentPolygon);
                    }
                    if (data[i].child) {
                        for (var j = 0; j < data[i].child.length; j++) {
                            //绘制行政区划
                            polygon(data[i].child[j].points, false, childPolygon);
                        }
                    }
                }
            }
        }

        //画出边界
        function polygon(points, isParent, polygonConfig) {
            if (isParent)
                var pointsArr = [];
            for (var i = 0; i < points.length; i++) {
                var regionLngLats = [];
                var regionArr = points[i].region.split(",");
                for (var m = 0; m < regionArr.length; m++) {
                    var lnglatArr = regionArr[m].split(" ");
                    var lnglat = new T.LngLat(lnglatArr[0], lnglatArr[1]);
                    regionLngLats.push(lnglat);
                    if (isParent)
                        pointsArr.push(lnglat);
                }
                //创建面对象
                var polygon = new T.Polygon(regionLngLats, polygonConfig);
                polygons.push(polygon);
                //向地图上添加行政区划面
                map.addOverLay(polygon);
                if (isParent) {
                    parentPolygon = polygon;
                    parentPolygon.hide();
                }
            }
            //显示最佳比例尺
            if (isParent)
                map.setViewport(pointsArr);
        }

        //显示行政区域或者隐藏
        function ShowOrHidePolygon(bol) {
            for (var i = 0; i < polygons.length; i++) {
                if (bol) {
                    polygons[i].show();
                } else {
                    polygons[i].hide();
                }
            }
            if (bol) {
                parentPolygon.hide();
            } else {
                parentPolygon.show();
            }
        }

        //tab页实现js
        function setTab(m, n) {
            var tli = document.getElementById("menu" + m).getElementsByTagName("li");
            var mli = document.getElementById("main" + m).getElementsByTagName("ul");
            for (i = 0; i < tli.length; i++) {
                tli[i].className = i == n ? "hover" : "";
                mli[i].style.display = i == n ? "block" : "none";
            }
        }

    </script>

</head>
<body>
    <form id="form1" runat="server">
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="javascript:void(0);" style="width: 583px; height: 74px;">
                        <img src="Resource/themes/default/images/Map/logo.png" style="width: 583px; height: 74px;" /></a>
                </div>
                <div>
                    <ul class="nav navbar-nav navbar-right">
                        <li>
                            <a href="Default.aspx">返回首页</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-2" style="height: 100%;padding: 0;">
                    <div class="tabcontroller">
				        <ul>
					        <li class="active">组织</li>
					        <li>搜索</li>
				        </ul>
			        </div>

                    <div class="tabpanel">
                        <div id="main" class="tab on">
                            <ul id="browser" class="filetree treeview-famfamfam">
                                <asp:Literal ID="liTree" runat="server"></asp:Literal>
                            </ul>
                        </div>
                        <div id="main1" class="tab">
                            2
                        </div>
                    </div>
                    
                </div>
                <div class="col-sm-10 bg-success" style="position: relative; height: 100%; margin: 0; padding: 0;" id="aDiv">
                    <div class="moveblock" id="moveblock" style="z-index: 100000; position: absolute; left: 0; top: 50%; margin-top: -15px; width: 20px; height: 30px; background: black; text-align: center; line-height: 30px; cursor: pointer;">
                        <span class="glyphicon glyphicon-chevron-left" style="color: #fff;"></span>
                    </div>
                    <div>
                        <input type="button" value="显示行政区域" onclick="ShowOrHidePolygon(true)" />
                        <input type="button" value="关闭行政区域" onclick="ShowOrHidePolygon(false)" />
                    </div>
                    <div id="mapDiv" style="width: 100%; height: 100%; z-index: 0;"></div>
                </div>
            </div>
        </div>
    </form>
</body>
<script src="Resource/js/jquery.min.js"></script>
<script src="Resource/js/bootstrap.min.js"></script>
<script src="Resource/js/jquery.treeview.js"></script>
<script type="text/javascript">
    $(function () {
        resizeH();
        function resizeH() {
            $(".row").height($(window).height() - $("nav").height() - 2);
        };
        $(window).resize(
            function () {
                resizeH();
            }
        );

        //初始化地图
        onLoad(null, null);

        $("#moveblock").click(function () {
            $(".col-sm-2").toggle();
            $(".col-sm-10").toggleClass("col-sm-12");
            $(this).find("span").toggleClass("glyphicon-chevron-right");
        });

        $("#browser").treeview({
            persist: "location",
            collapsed: false,
            unique: true,
            toggle: function () {
                console.log("%s was toggled.", $(this).find(">span").text());
            }
        });

        $('.tabcontroller li').click(function () {
            var index = $(this).index();
			$(this).addClass('active').siblings().removeClass('active');
			$('.tabpanel .tab').eq(index).show().siblings().hide();
		});
    });

    var clickItem = function (xPoint, yPoint) {
        //初始化地图
        onLoad(xPoint, yPoint);
    };
</script>
</html>
